<template>
  <div class="app-iframe-container">
    <el-form ref="form" :model="form" :v-loading="formLoading" :rules="rules" label-width="120px" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" :title="form.name" :readonly="!inputNameValid" max-length="20"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型:" prop="dbType">
            <el-select v-model="form.dbType" :disabled="!inputDbTypeValid">
              <el-option v-for="item in enums.dbTypeEnum" :key="item.value" :label="item.text" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="form.username" :title="form.username" :readonly="!inputUsernameValid" max-length="20"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码:" prop="password">
            <el-input v-model="form.password" :readonly="!inputPasswordValid" type="password" max-length="50"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据库链接:" prop="url">
            <el-input
              :readonly="!inputUrlValid"
              v-model="form.url"
              max-lenght="100"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input
              :readonly="!inputRemarkValid"
              v-model="form.remark"
              :rows="2"
              maxlength="40"
              type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="创建时间:">
            <el-input :value="form.addDate | parseDateTime" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建人:">
            <el-input :value="form.addUserName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修改时间:">
            <el-input :value="form.editDate | parseDateTime" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修改人:">
            <el-input :value="form.editUserName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row v-if="operateType==='edit'" class="seconder-button-container">
        <el-button icon="el-icon-remove-outline" @click="cancel">取消</el-button>
        <el-button :disabled="buttonLock" icon="el-icon-check" type="primary" @click="edit">保存</el-button>
      </el-row>
      <el-row v-if="operateType==='add'" class="seconder-button-container">
        <el-button icon="el-icon-remove-outline" @click="cancel">取消</el-button>
        <el-button :disabled="buttonLock" icon="el-icon-check" type="primary" @click="add">保存</el-button>
      </el-row>
      <el-row v-if="operateType==='detail'" class="seconder-button-container">
        <el-button icon="el-icon-remove-outline" @click="cancel">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import databaseApi from '@/api/dbms/database'
import dbTypeEnum from '@/enums/dbms/dbTypeEnum'

export default {
  name: 'DbmsDatabaseInfo',
  props: {
    // 配置信息id
    id: {
      type: String,
      required: true
    },
    // 时间戳，判断是否要重新请求详情信息
    t: {
      type: Number,
      required: true
    },
    // 操作类型, 可用 detail , edit, add
    operateType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: this.id,
        dbType: '',
        name: '',
        url: '',
        username: '',
        password: '',
        remark: '',
        addUsername: '',
        addDate: '',
        editUsername: '',
        editDate: ''
      },
      enums: {
        dbTypeEnum
      },
      addFormRule: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在3到20个字符之间', trigger: 'blur' }
        ],
        dbType: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 200, message: '最多可输入200个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 20, message: '最多可输入20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 50, message: '最多可输入50个字符', trigger: 'blur' }
        ]
      },
      editFormRule: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在3到20个字符之间', trigger: 'blur' }
        ],
        dbType: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 200, message: '最多可输入200个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 20, message: '最多可输入20个字符', trigger: 'blur' }
        ],
        password: [
          { max: 50, message: '最多可输入50个字符', trigger: 'blur' }
        ]
      },
      formLoading: false,
      buttonLock: false
    }
  },
  computed: {
    rules() {
      if (this.operateType === 'add') {
        return this.addFormRule
      }
      if (this.operateType === 'edit') {
        return this.editFormRule
      }
    },
    inputNameValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputDbTypeValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputDataValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputRemarkValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputUsernameValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputPasswordValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    },
    inputUrlValid() {
      if (this.operateType === 'add' || this.operateType === 'edit') {
        return true
      }
      return false
    }
  },
  watch: {
    t: function(newVal, oldVal) {
      this.form.id = this.id
      this.getDetail()
    },
    id: function() {
      this.form.id = this.id
      this.getDetail()
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      if (!this.form.id) {
        return
      }
      this.formLoading = true
      databaseApi.detail({ id: this.form.id }).then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.form = responseData
          this.formLoading = false
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },

    /** *
       * 添加操作
       */
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过，提交数据
          this.buttonLock = true
          const postData = this.form
          databaseApi.add(postData).then(response => {
            this.buttonLock = false
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$emit('addComplete')
              }
            })
          })
        }
      })
    },
    // 修改操作
    edit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过，提交数据
          this.buttonLock = true
          const postData = this.form
          databaseApi.edit(postData).then(response => {
            this.buttonLock = false
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$emit('editComplete')
              }
            })
          })
        }
      })
    },
    /** *
       * 取消操作
       */
    cancel() {
      this.$emit('doClose')
    }
  }
}

</script>

<style scoped>

</style>
